<template>
  <div class="page-container" v-global-loading="loading">
    <div class="page-card-container">
      <a-tabs v-model:activeKey="activeKey" @change="changeTab">
        <a-tab-pane :key="null" tab="全部订单"></a-tab-pane>
        <a-tab-pane :key="0" tab="已提交订单"></a-tab-pane>
        <a-tab-pane :key="2" tab="待审核订单"></a-tab-pane>
        <a-tab-pane :key="3" tab="待发货订单"></a-tab-pane>
        <a-tab-pane :key="4" tab="待收货订单"></a-tab-pane>
        <a-tab-pane :key="6" tab="已完成订单"></a-tab-pane>
      </a-tabs>
      <a-form :model="pageSet" layout="inline">
        <a-form-item label="订单编号">
          <a-input
            v-model:value="pageSet.codeSN"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="收货人">
          <a-input
            v-model:value="pageSet.consignee"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="下单时间">
          <a-range-picker
            v-model:value="pageSet.applyStatuDate"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            @change="changePicker"
          />
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-warning" @click="loadPagination(true)">
            查询
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="reset">重置</div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="exportDerive">订单导出</div>
        </a-form-item>
        <a-form-item label="">
          <div
            class="commonBtn-primary"
            style="margin-left: 10px"
            @click="operation(2, {}, true)"
            v-if="activeKey == 3"
          >
            批量发货
          </div>
        </a-form-item>
      </a-form>
      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        row-key="id"
        :preserveSelectedRowKeys="true"
        :row-selection="{
          selectedRowKeys: selectedRowKeysList,
          onChange: onSelectChange,
          preserveSelectedRowKeys: true
        }"
        :scroll="{
          x: 1200,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
        <template #bodyCell="{text, record, index, column}">
          <template v-if="column.title == '操作'">
            <span class="pointer c-primaryColor" @click="operation(1, record)"
              >查看</span
            >
            <span
              class="pointer c-primaryColor"
              @click="operation(2, record, false)"
              v-if="activeKey == 3"
              >&nbsp;发货</span
            >
            <span
              class="pointer c-primaryColor"
              @click="operation(3, record)"
              v-if="activeKey == 2"
              >&nbsp;审核</span
            >
            <span
              class="pointer c-primaryColor"
              @click="operation(5, record)"
              v-if="activeKey == 3 || activeKey == 4 || activeKey == 6"
              >&nbsp;开票</span
            >
            <span
              class="pointer c-primaryColor"
              @click="operation(6, record)"
              v-if="activeKey == 4"
              >&nbsp;确认收货</span
            >
            <span
              class="pointer c-primaryColor"
              @click="operation(9, record)"
              v-if="activeKey == 0"
              >&nbsp;修改收货地址</span
            >
            <span
              class="pointer c-primaryColor"
              @click="operation(10, record)"
              v-if="activeKey == 0"
              >&nbsp;修改商品数量</span
            >
            <!-- <span class="pointer c-primaryColor" @click="operation(7, record)">&nbsp;商品信息</span>
              <span class="pointer c-primaryColor" @click="operation(8, record)">&nbsp;发票信息</span> -->
            <!-- <span class="pointer c-primaryColor" @click="operation(4, record)">&nbsp;删除</span> -->
          </template>
          <template v-if="column.title == '商品信息'">
            <div
              class="pointer"
              @click="
                () => {
                  setVisible(true);
                }
              "
            >
              <img :src="text" alt="" style="height: 30px" />
              <a-image
                :width="10"
                :style="{display: 'none'}"
                :preview="{visible: visibleImg, onVisibleChange: setVisible}"
                :src="text"
              />
            </div>
          </template>
        </template>
      </a-table>
      <!-- 订单详情 -->
      <a-modal
        v-model:open="visible"
        width="1000px"
        :zIndex="1010"
        :title="visibleTitle"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-alert
            message="支付方式校验成功，请确认商品数量修改后的订单数据。"
            type="success"
            show-icon
            style="margin-bottom: 10px"
            v-if="isUpdata"
          />
          <a-form :labelCol="{span: 8}" :model="form" ref="formRef">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="订单编号" name="codeSN">
                  <a-input v-model:value="form.codeSN" />
                </a-form-item>
                <a-form-item label="支付方式" name="payWay">
                  <!-- <a-input v-model:value="form.payWay" /> -->
                  <a-select
                    v-model:value="form.payWay"
                    :filter-option="filterOption"
                    show-search
                    allowClear
                  >
                    <a-select-option
                      :value="item.value"
                      :title="item.label"
                      v-for="item in payWay"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
                <a-form-item label="是否包邮" name="isFreePostage">
                  <a-select v-model:value="form.isFreePostage">
                    <a-select-option :value="true">是</a-select-option>
                    <a-select-option :value="false">否</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="订单总金额" name="amount">
                  <a-input v-model:value="form.amount" />
                </a-form-item>
                <a-form-item label="订单优惠金额" name="discountAmount">
                  <a-input v-model:value="form.discountAmount" />
                </a-form-item>
                <a-form-item label="收货人" name="consignee">
                  <a-input v-model:value="form.consignee" />
                </a-form-item>
                <a-form-item label="收货人手机号" name="consigneePhone">
                  <a-input v-model:value="form.consigneePhone" />
                </a-form-item>
                <a-form-item label="收货地址" name="consigneeAddress">
                  <a-input v-model:value="form.consigneeAddress" />
                </a-form-item>
                <a-form-item label="收票人" name="payee">
                  <a-input v-model:value="form.payee" />
                </a-form-item>
                <a-form-item label="收票人手机号" name="payeePhone">
                  <a-input v-model:value="form.payeePhone" />
                </a-form-item>
                <a-form-item label="收票地址" name="payeeAddress">
                  <a-input v-model:value="form.payeeAddress" />
                </a-form-item>
                <a-form-item label="退款金额" name="refundAmount">
                  <a-input v-model:value="form.refundAmount" />
                </a-form-item>
                <a-form-item label="支付金额" name="payAmount">
                  <a-input v-model:value="form.payAmount" />
                </a-form-item>
                <a-form-item label="支付时间" name="payTime">
                  <!-- <a-input v-model:value="form.payTime" /> -->
                  <a-date-picker
                    placeholder="暂无时间"
                    show-time
                    v-model:value="form.payTime"
                    style="width: 308px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
                <a-form-item label="支付凭证图片" name="payProofImg">
                  <!-- <a-image :width="100" :src="form.payProofImg" /> -->
                  <a
                    :href="form.payProofImg"
                    v-if="form.payProofImg"
                    target="_blank"
                    >点击查看</a
                  >
                </a-form-item>
                <a-form-item label="支付订单编号" name="payCodeSN">
                  <a-input v-model:value="form.payCodeSN" />
                </a-form-item>
                <a-form-item label="查看商品信息" name="amount">
                  <span @click="visible4 = true" class="pointer c-primaryColor"
                    >点击查看商品信息</span
                  >
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="税额" name="tax">
                  <a-input v-model:value="form.tax" />
                </a-form-item>
                <a-form-item label="商家收款账号" name="payAccount">
                  <a-input v-model:value="form.payAccount" />
                </a-form-item>
                <a-form-item label="线下回款付款单备注" name="payRemark">
                  <a-input v-model:value="form.payRemark" />
                </a-form-item>
                <a-form-item label="订单备注" name="remark">
                  <a-input v-model:value="form.remark" />
                </a-form-item>
                <a-form-item label="客户订单号" name="customerOrderSN">
                  <a-input v-model:value="form.customerOrderSN" />
                </a-form-item>
                <a-form-item label="客户备注" name="customerRemark">
                  <a-input v-model:value="form.customerRemark" />
                </a-form-item>
                <a-form-item label="同步状态" name="syncStatus">
                  <a-select
                    v-model:value="form.syncStatus"
                    :filter-option="filterOption"
                    show-search
                    allowClear
                  >
                    <a-select-option
                      :value="item.value"
                      :title="item.label"
                      v-for="item in syncStatus"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
                <a-form-item label="同步时间" name="syncTime">
                  <!-- <a-input v-model:value="form.syncTime" /> -->
                  <a-date-picker
                    placeholder="暂无时间"
                    show-time
                    v-model:value="form.syncTime"
                    style="width: 308px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
                <a-form-item label="同步备注" name="syncRemark">
                  <a-input v-model:value="form.syncRemark" />
                </a-form-item>
                <a-form-item label="下单人名称" name="memberName">
                  <a-input v-model:value="form.memberName" />
                </a-form-item>
                <a-form-item label="下单时间" name="addTime">
                  <a-date-picker
                    placeholder="暂无时间"
                    show-time
                    v-model:value="form.addTime"
                    style="width: 308px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
                <a-form-item label="审核人名称" name="applyUserName">
                  <a-input v-model:value="form.applyUserName" />
                </a-form-item>
                <a-form-item label="审核时间" name="applyTime">
                  <a-date-picker
                    placeholder="暂无时间"
                    show-time
                    v-model:value="form.applyTime"
                    style="width: 308px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
                <a-form-item label="发货时间" name="deliveryTime">
                  <a-date-picker
                    placeholder="暂无时间"
                    show-time
                    v-model:value="form.deliveryTime"
                    style="width: 308px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
                <a-form-item label="确认收货时间" name="confirmReceiptTime">
                  <a-date-picker
                    placeholder="暂无时间"
                    show-time
                    v-model:value="form.confirmReceiptTime"
                    style="width: 308px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
                <a-form-item label="订单状态" name="orderStatus">
                  <a-select
                    v-model:value="form.orderStatus"
                    :filter-option="filterOption"
                    show-search
                    allowClear
                  >
                    <a-select-option
                      :value="item.value"
                      :title="item.label"
                      v-for="item in orderStatus"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
                <a-form-item label="查看发票信息" name="amount">
                  <span @click="visible3 = true" class="pointer c-primaryColor"
                    >点击查看发票信息</span
                  >
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div
            style="display: flex; justify-content: end; margin-top: 10px"
            v-if="isUpdata"
          >
            <a-button style="margin-right: 10px" @click="visible = false"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(6)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 发货信息 -->
      <a-modal
        v-model:open="visible1"
        width="600px"
        title="发货信息"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <div
            v-for="(item, index) in orderIDlist"
            style="
              border-bottom: 1px solid rgb(223, 211, 211);
              margin-bottom: 22px;
            "
          >
            <a-form
              :labelCol="{span: 7}"
              :model="orderIDlist[index]"
              ref="deliveryRef"
            >
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item
                    label="订单编号"
                    name="codeSN"
                    :rules="[{required: true, message: '请填写'}]"
                  >
                    <a-input
                      v-model:value="orderIDlist[index].codeSN"
                      disabled
                    />
                  </a-form-item>
                  <a-form-item
                    label="发货编号"
                    name="deliveryCode"
                    :rules="[{required: true, message: '请填写'}]"
                  >
                    <a-input v-model:value="orderIDlist[index].deliveryCode" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item
                    label="快递公司"
                    name="courierCompany"
                    :rules="[{required: true, message: '请填写'}]"
                  >
                    <a-input
                      v-model:value="orderIDlist[index].courierCompany"
                    />
                  </a-form-item>
                  <a-form-item
                    label="快递单号"
                    name="courierNum"
                    :rules="[{required: true, message: '请填写'}]"
                  >
                    <a-input v-model:value="orderIDlist[index].courierNum" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="visible1 = false"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(1)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 发票信息 -->
      <a-modal
        v-model:open="visible2"
        width="600px"
        title="发票信息"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form :labelCol="{span: 7}" :model="invoiceForm" ref="invoiceRef">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item
                  label="发票号码"
                  name="invoiceNum"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-input v-model:value="invoiceForm.invoiceNum" />
                </a-form-item>
                <a-form-item
                  label="发票内容"
                  name="content"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-input v-model:value="invoiceForm.content" />
                </a-form-item>
                <a-form-item label="发票状态" name="status">
                  <a-select
                    v-model:value="invoiceForm.status"
                    :filter-option="filterOption"
                    show-search
                    allowClear
                  >
                    <a-select-option
                      :value="item.value"
                      :title="item.label"
                      v-for="item in invoiceState"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="发票代码"
                  name="invoiceCode"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-input v-model:value="invoiceForm.invoiceCode" />
                </a-form-item>
                <a-form-item
                  label="开票金额"
                  name="amount"
                  :rules="[{required: true, message: '请填写'}]"
                >
                  <a-input v-model:value="invoiceForm.amount" />
                </a-form-item>
                <a-form-item label="发票图片" name="invoiceImg">
                  <!-- <a-input v-model:value="invoiceForm.invoiceImg" /> -->
                  <a-image
                    :width="100"
                    :src="invoiceForm.invoiceImg"
                    v-if="invoiceForm.invoiceImg"
                  />
                  <div class="commonBtn-primary" @click="upload">上传</div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item
              label="发票备注"
              name="invoiceRemark"
              :labelCol="{span: 3}"
            >
              <a-input v-model:value="invoiceForm.invoiceRemark" />
            </a-form-item>
          </a-form>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="visible2 = false"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(2)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 发票详情 -->
      <a-modal
        v-model:open="visible3"
        width="800px"
        :zIndex="1011"
        title="发票详情"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form
            :labelCol="{span: 7}"
            :model="invoiceDetailsForm"
            ref="invoiceDetailsRef"
          >
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="发票抬头" name="invoiceTitle">
                  <a-input v-model:value="invoiceDetailsForm.invoiceTitle" />
                </a-form-item>
                <a-form-item label="发票类型" name="invoiceType">
                  <a-select
                    v-model:value="invoiceDetailsForm.invoiceType"
                    :filter-option="filterOption"
                    show-search
                    allowClear
                  >
                    <a-select-option
                      :value="item.value"
                      :title="item.label"
                      v-for="item in invoiceType"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
                <a-form-item label="发票代码" name="invoiceCode">
                  <a-input v-model:value="invoiceDetailsForm.invoiceCode" />
                </a-form-item>
                <a-form-item label="发票号码" name="invoiceNum">
                  <a-input v-model:value="invoiceDetailsForm.invoiceNum" />
                </a-form-item>
                <a-form-item label="账户" name="account">
                  <a-input v-model:value="invoiceDetailsForm.account" />
                </a-form-item>
                <a-form-item label="开户行" name="bank">
                  <a-input v-model:value="invoiceDetailsForm.bank" />
                </a-form-item>
                <a-form-item label="开票金额(元)" name="amount">
                  <a-input v-model:value="invoiceDetailsForm.amount" />
                </a-form-item>
                <a-form-item label="注册电话" name="phone">
                  <a-input v-model:value="invoiceDetailsForm.phone" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="企业名称" name="companyName">
                  <a-input v-model:value="invoiceDetailsForm.companyName" />
                </a-form-item>
                <a-form-item label="企业邮箱" name="email">
                  <a-input v-model:value="invoiceDetailsForm.email" />
                </a-form-item>
                <a-form-item label="纳税人识别号" name="taxpayerNum">
                  <a-input v-model:value="invoiceDetailsForm.taxpayerNum" />
                </a-form-item>
                <a-form-item label="发票内容" name="content">
                  <a-input v-model:value="invoiceDetailsForm.content" />
                </a-form-item>
                <a-form-item label="发票状态" name="status">
                  <a-select
                    v-model:value="invoiceDetailsForm.status"
                    :filter-option="filterOption"
                    show-search
                    allowClear
                  >
                    <a-select-option
                      :value="item.value"
                      :title="item.label"
                      v-for="item in invoiceState"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
                <a-form-item label="发票备注" name="invoiceRemark">
                  <a-input v-model:value="invoiceDetailsForm.invoiceRemark" />
                </a-form-item>
                <a-form-item label="地址信息" name="address">
                  <a-input v-model:value="invoiceDetailsForm.address" />
                </a-form-item>
                <a-form-item label="发票图片" name="invoiceImg">
                  <a-image
                    :width="100"
                    :src="invoiceDetailsForm.invoiceImg"
                    v-if="invoiceDetailsForm.invoiceImg"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-modal>
      <!-- 商品信息 -->
      <a-modal
        v-model:open="visible4"
        width="800px"
        :zIndex="1012"
        title="商品信息"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-form
            :labelCol="{span: 7}"
            :model="commodityForm"
            ref="commodityRef"
          >
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="商品名称" name="productName">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].productName"
                  />
                </a-form-item>
                <a-form-item label="商品规格" name="productSpec">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].productSpec"
                  />
                </a-form-item>
                <a-form-item label="商品图片" name="productImg">
                  <a-image
                    :width="100"
                    :src="commodityForm[commodityIndex].productImg[0].ImgUrl"
                  />
                </a-form-item>
                <a-form-item label="下单数量" name="num">
                  <a-input v-model:value="commodityForm[commodityIndex].num" />
                </a-form-item>
                <a-form-item label="单价" name="price">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].price"
                  />
                </a-form-item>
                <a-form-item label="总金额" name="amount">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].amount"
                  />
                </a-form-item>
                <a-form-item label="税额" name="tax">
                  <a-input v-model:value="commodityForm[commodityIndex].tax" />
                </a-form-item>
                <a-form-item label="会员单价" name="memberPrice">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].memberPrice"
                  />
                </a-form-item>
                <a-form-item label="优惠总金额" name="discountAmount">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].discountAmount"
                  />
                </a-form-item>
                <a-form-item label="商品参数" name="productSkuValues">
                  <span
                    @click="
                      examineSKU(commodityForm[commodityIndex].productSkuValues)
                    "
                    class="pointer c-primaryColor"
                    >点击查看商品参数</span
                  >
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品编号" name="productCode">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].productCode"
                  />
                </a-form-item>
                <a-form-item label="商品单位" name="productUnit">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].productUnit"
                  />
                </a-form-item>
                <a-form-item label="客户物料号" name="materialNum">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].materialNum"
                  />
                </a-form-item>
                <a-form-item label="客户物料名称" name="materialName">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].materialName"
                  />
                </a-form-item>
                <!-- <a-form-item label="客户物料规格" name="materialSpec">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].materialSpec"
                  />
                </a-form-item>
                <a-form-item label="客户物料单位" name="materialUnit">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].materialUnit"
                  />
                </a-form-item>
                <a-form-item label="物料数量" name="materialCount">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].materialCount"
                  /> 
                </a-form-item>-->
                <a-form-item label="退款总金额" name="refundAmount">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].refundAmount"
                  />
                </a-form-item>
                <a-form-item label="退款数量" name="refundNum">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].refundNum"
                  />
                </a-form-item>
                <a-form-item label="支付总金额" name="payAmount">
                  <a-input
                    v-model:value="commodityForm[commodityIndex].payAmount"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div style="display: flex; justify-content: end">
            <a-pagination
              v-model:current="current"
              simple
              v-model:page-size="pageSize1"
              :total="commodityForm.length"
              @change="changePage"
            />
          </div>
        </div>
      </a-modal>
      <!-- 商品SkU -->
      <a-modal
        v-model:open="visible5"
        width="600px"
        :zIndex="1013"
        title="商品参数"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-table
            size="small"
            :dataSource="tableDataSku"
            :columns="columnsSku"
            bordered
            :pagination="false"
          >
            <template #bodyCell="{index, text, record, column}"> </template>
          </a-table>
          <div style="display: flex; justify-content: end; margin-top: 10px">
            <a-button type="primary" @click="visible5 = false">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 修改收货地址 -->
      <a-modal
        v-model:open="visible6"
        width="800px"
        title=""
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-tabs v-model:activeKey="activeKeyAddress">
            <a-tab-pane :key="1" tab="新地址信息">
              <a-form
                :labelCol="{span: 7}"
                :model="newAddressInformation"
                ref="newAddressInformationRef"
              >
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item
                      label="收货人"
                      name="consignee"
                      :rules="[{required: true, message: '请填写'}]"
                    >
                      <a-input
                        v-model:value="newAddressInformation.consignee"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="收货人手机号"
                      name="consigneePhone"
                      :rules="[{required: true, message: '请填写'}]"
                    >
                      <a-input
                        v-model:value="newAddressInformation.consigneePhone"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <div
                  style="display: flex; padding-left: 50px; margin-bottom: 20px"
                >
                  <span style="line-height: 30px">城市选择 :&nbsp;&nbsp;</span>
                  <a-select
                    v-model:value="newAddressInformation.consigneeProvinceId"
                    :filter-option="filterOption"
                    show-search
                    allowClear
                    style="width: 200px"
                    placeholder="请选择省份"
                    @change="
                      (a) => {
                        changeCity(a, 'province');
                      }
                    "
                  >
                    <a-select-option
                      :value="item.code"
                      v-for="(item, index) in district"
                      :key="index"
                      :title="item.name"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                  <a-select
                    v-model:value="newAddressInformation.consigneeCityId"
                    :filter-option="filterOption"
                    show-search
                    allowClear
                    style="width: 200px; margin-left: 14px"
                    placeholder="请选择城市"
                    @change="
                      (a) => {
                        changeCity(a, 'city');
                      }
                    "
                  >
                    <a-select-option
                      :value="item.code"
                      v-for="(item, index) in provinceList"
                      :key="index"
                      :title="item.name"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                  <a-select
                    v-model:value="newAddressInformation.consigneeCountyId"
                    :filter-option="filterOption"
                    show-search
                    allowClear
                    style="width: 200px; margin-left: 14px"
                    placeholder="请选择区县"
                    @change="
                      (a) => {
                        changeCity(a, 'district');
                      }
                    "
                  >
                    <a-select-option
                      :value="item.code"
                      v-for="(item, index) in cityList"
                      :key="index"
                      :title="item.name"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </div>
                <a-form-item
                  label="详细地址"
                  name="consigneeAddress"
                  :labelCol="{span: 3}"
                >
                  <a-input
                    v-model:value="newAddressInformation.consigneeAddress"
                  />
                </a-form-item>
              </a-form>
              <div
                style="display: flex; justify-content: end; margin-top: 10px"
              >
                <a-button style="margin-right: 10px" @click="visible6 = false"
                  >取消</a-button
                >
                <a-button type="primary" @click="submit(3)">确定</a-button>
              </div>
            </a-tab-pane>
            <a-tab-pane :key="2" tab="旧地址信息">
              <a-form
                :labelCol="{span: 7}"
                :model="addressInformation"
                ref="addressInformationRef"
              >
                <a-row :gutter="24">
                  <a-col :span="12">
                    <a-form-item label="收货人" name="consignee">
                      <a-input v-model:value="addressInformation.consignee" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="收货人手机号" name="consigneePhone">
                      <a-input
                        v-model:value="addressInformation.consigneePhone"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <div
                  style="display: flex; padding-left: 50px; margin-bottom: 20px"
                >
                  <span style="line-height: 30px">地址信息 :&nbsp;&nbsp;</span>
                  <a-input
                    style="width: 200px"
                    v-model:value="addressInformation.consigneeProvince"
                  />
                  <a-input
                    style="width: 200px; margin-left: 14px"
                    v-model:value="addressInformation.consigneeCity"
                  />
                  <a-input
                    style="width: 200px; margin-left: 14px"
                    v-model:value="addressInformation.consigneeCounty"
                  />
                </div>
                <a-form-item
                  label="详细地址"
                  name="consigneeAddress"
                  :labelCol="{span: 3}"
                >
                  <a-input
                    v-model:value="addressInformation.consigneeAddress"
                  />
                </a-form-item>
              </a-form>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-modal>
      <!-- 修改商品数量 -->
      <a-modal
        v-model:open="visible7"
        width="800px"
        title="修改商品数量"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <div
            v-for="(item, index) in UpdateOrderProductData.orderDetailNumDtos"
            style="
              border-bottom: 1px solid rgb(228, 221, 221);
              margin-bottom: 18px;
            "
          >
            <a-form
              :labelCol="{span: 7}"
              :model="UpdateOrderProductData.orderDetailNumDtos[index]"
              ref="UpdateOrderProductDataRef"
            >
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-item label="商品名称" name="productName">
                    <a-input
                      v-model:value="
                        UpdateOrderProductData.orderDetailNumDtos[index]
                          .productName
                      "
                      disabled
                    />
                  </a-form-item>
                  <a-form-item label="商品单价" name="price">
                    <a-input
                      v-model:value="
                        UpdateOrderProductData.orderDetailNumDtos[index].price
                      "
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="商品编号" name="productCode">
                    <a-input
                      v-model:value="
                        UpdateOrderProductData.orderDetailNumDtos[index]
                          .productCode
                      "
                      disabled
                    />
                  </a-form-item>
                  <a-form-item label="商品数量" name="num">
                    <a-input-number
                      v-model:value="
                        UpdateOrderProductData.orderDetailNumDtos[index].num
                      "
                      min="0"
                      style="width: 254px"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <a-form-item
            label="支付方式"
            name="productName"
            :labelCol="{span: 3}"
          >
            <a-select
              v-model:value="UpdateOrderProductData.payWay"
              :filter-option="filterOption"
            >
              <a-select-option
                :value="item.value"
                :title="item.label"
                v-for="item in payWay"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <div style="display: flex; justify-content: end; margin-top: 10px">
            <a-button style="margin-right: 10px" @click="visible7 = false"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(4)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <!-- 选择新的支付方式 -->
      <a-modal
        v-model:open="visible8"
        width="700px"
        :zIndex="1001"
        title="选择支付方式"
        :footer="null"
        :maskClosable="false"
      >
        <div v-global-loading="modalloading">
          <a-alert
            message="由于修改商品数量使支付金额发生变化导致当前支付方式不可用请重新选择支付方式。"
            type="warning"
            show-icon
            style="margin-bottom: 20px"
          />
          <a-form-item
            label="支付方式"
            name="payWayNewData"
            :labelCol="{span: 3}"
          >
            <a-select
              v-model:value="payWayNewData"
              :filter-option="filterOption"
            >
              <a-select-option
                :value="item.value"
                :title="item.name"
                v-for="item in payWayNew"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <div style="display: flex; justify-content: end; margin-top: 10px">
            <a-button style="margin-right: 10px" @click="visible8 = false"
              >取消</a-button
            >
            <a-button type="primary" @click="submit(5)">确定</a-button>
          </div>
        </div>
      </a-modal>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, createVNode} from "vue";
import Pagination from "@/components/pagination/Pagination.vue";
import useAppStore from "@/store/app";
import {trigerUpload, trigerUploadObs} from "@/utils/common";
import {exportExcel} from "@/utils/exportFile";
import {
  orderPage,
  orderDetail,
  orderAuditOrder,
  orderBatchDelivery,
  orderDelete,
  orderUpdateOrderInvioce,
  orderConfirmReceipt,
  orderUpdateAddress,
  orderCheckIsFreePostage,
  orderSubmitUpdateOrderInfo,
  orderGetUpdateOrderProduct
} from "@/api/orderManagement/orderManagementList";
import {message, Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import district from "@/utils/city";
const filterOption = (input: string, option: any) => {
  return option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const upload = () => {
  trigerUpload().then((res: any) => {
    let files = res.target.files[0];
    if (
      files.type == "image/jpeg" ||
      files.type == "image/png" ||
      files.type == "image/jpg"
    ) {
      modalloading.value = true;
      trigerUploadObs(res)
        .then((data) => {
          invoiceForm.value.invoiceImg = data;
        })
        .finally(() => {
          modalloading.value = false;
        });
    } else {
      message.error("请上传jpeg、png、jpg类型的图片");
    }
  });
};
const visible = ref(false);
const visible1 = ref(false);
const visible2 = ref(false);
const visible3 = ref(false);
const visible4 = ref(false);
const visible5 = ref(false);
const visible6 = ref(false);
const visible7 = ref(false);
const visible8 = ref(false);
const commodityForm = ref<any>([]);
const commodityRef = ref();
const invoiceDetailsForm = ref<any>({});
const invoiceDetailsRef = ref();
const modalloading = ref(false);
const tableLoading = ref<boolean>(false);
const form = ref<any>(false);
const loading = ref<boolean>(false);
const activeKey = ref(null);
const visibleImg = ref<boolean>(false);
const pageSize1 = ref(1);
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0,
  orderStatus: null
});
const tableData = ref<Array<object>>([]);
const visibleTitle = ref("订单详情");
//订单详情是否有提交按钮
const isUpdata = ref(false);
const tableDataSku = ref([]);
const current = ref(1);
//发票信息
const invoiceRef = ref();
const invoiceForm = ref<any>({});
//当前选中的ID
const selectedRowKeysList = ref([]);
//当前选中的数据
const selectedRowDataList = ref([]);
//选中时事件
const onSelectChange = (selectedRowKeys, data) => {
  selectedRowKeysList.value = selectedRowKeys;
  selectedRowDataList.value = data;
};
const deliveryRef = ref();
//当前操作需要发货得订单集合
const orderIDlist = ref<Array<any>>([]);
//新地址信息集合
const newAddressInformation = ref<any>({});
//旧地址信息集合
const addressInformation = ref<any>({});
const newAddressInformationRef = ref();
const activeKeyAddress = ref(1);
//修改商品数量支付方式数据
const UpdateOrderProductData = ref<any>({});
//操作
const operation = (type: number, data: object | any, flag: boolean = false) => {
  if (type == 1) {
    //查看
    loading.value = true;
    orderDetail({id: data.id})
      .then((res) => {
        form.value = res.data;
        form.value.consigneeAddress =
          form.value.consigneeProvince +
          form.value.consigneeCity +
          form.value.consigneeCounty +
          form.value.consigneeAddress;
        form.value.payeeAddress =
          form.value.payeeProvince +
          form.value.payeeCity +
          form.value.payeeCounty +
          form.value.payeeAddress;
        form.value.consigneeAddress = form.value.consigneeAddress
          ? form.value.consigneeAddress
          : null;
        form.value.payeeAddress = form.value.payeeAddress
          ? form.value.payeeAddress
          : null;
        for (let k in form.value) {
          if (form.value[k] == "1900-01-01 00:00:00") {
            form.value[k] = null;
          }
        }
        //商品数据
        commodityIndex.value = 0;
        current.value = 1;
        commodityForm.value = res.data.orderDetails || [];
        commodityForm.value.forEach((item) => {
          item.productImg = JSON.parse(item.productImg);
          item.productSkuValues = JSON.parse(item.productSkuValues);
        });
        //发票数据
        invoiceDetailsForm.value = res.data.orderInvoiceDto;
        visibleTitle.value = "订单详情";
        isUpdata.value = false;
        visible.value = true;
      })
      .finally(() => {
        loading.value = false;
      });
  } else if (type == 2) {
    if (flag) {
      //批量发货
      if (selectedRowDataList.value.length) {
        orderIDlist.value = [];
        visible1.value = true;
        selectedRowDataList.value.forEach((element: any) => {
          orderIDlist.value.push({
            orderId: element.id,
            codeSN: element.codeSN,
            deliveryCode: null,
            courierCompany: null,
            courierNum: null
          });
        });
        visible1.value = true;
      } else {
        message.error("请选中需要发货的订单!");
      }
    } else {
      //单次发货
      orderIDlist.value = [
        {
          orderId: data.id,
          codeSN: data.codeSN,
          deliveryCode: null,
          courierCompany: null,
          courierNum: null
        }
      ];
      visible1.value = true;
    }
  } else if (type == 3) {
    //审核
    Modal.confirm({
      title: "提示",
      content: "确定要审核通过吗？",
      onOk() {
        loading.value = true;
        orderAuditOrder({id: data.id})
          .then(() => {
            message.success("审核成功");
            loadPagination();
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  } else if (type == 4) {
    //删除
    Modal.confirm({
      title: "提示",
      content: "确定要删除吗？",
      onOk() {
        loading.value = true;
        orderDelete({id: data.id})
          .then(() => {
            message.success("删除成功");
            loadPagination();
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  } else if (type == 5) {
    //开票
    invoiceForm.value = {};
    invoiceForm.value.orderId = data.id;
    visible2.value = true;
  } else if (type == 6) {
    //收货
    Modal.confirm({
      title: "提示",
      content: "确认该订单已收货吗？",
      onOk() {
        loading.value = true;
        orderConfirmReceipt({id: data.id})
          .then(() => {
            message.success("操作成功");
            loadPagination();
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  } else if (type == 7) {
    //商品信息
    loading.value = true;
    orderDetail({id: data.id})
      .then((res) => {
        form.value = res.data;
        commodityIndex.value = 0;
        commodityForm.value = res.data.orderDetails || [];
        commodityForm.value.forEach((item) => {
          item.productImg = JSON.parse(item.productImg);
          item.productSkuValues = JSON.parse(item.productSkuValues);
        });
        visible4.value = true;
      })
      .finally(() => {
        loading.value = false;
      });
  } else if (type == 8) {
    //发票信息
    loading.value = true;
    orderDetail({id: data.id})
      .then((res) => {
        form.value = res.data;
        invoiceDetailsForm.value = res.data.orderInvoiceDto;
        visible3.value = true;
      })
      .finally(() => {
        loading.value = false;
      });
  } else if (type == 9) {
    //修改收货地址
    loading.value = true;
    orderDetail({id: data.id})
      .then((res) => {
        newAddressInformation.value = {};
        newAddressInformation.value.orderId = data.id;
        activeKeyAddress.value = 1;
        visible6.value = true;
        addressInformation.value = {
          consignee: res.data.consignee,
          consigneePhone: res.data.consigneePhone,
          consigneeProvince: res.data.consigneeProvince,
          consigneeCity: res.data.consigneeCity,
          consigneeCounty: res.data.consigneeCounty,
          consigneeAddress: res.data.consigneeAddress
        };
      })
      .finally(() => {
        loading.value = false;
      });
  } else if (type == 10) {
    //修改商品信息
    loading.value = true;
    orderDetail({id: data.id})
      .then((res) => {
        let list = res.data.orderDetails || [];
        UpdateOrderProductData.value = {
          payWay: res.data.payWay,
          orderId: data.id,
          orderDetailNumDtos: []
        };
        list.forEach((item) => {
          item.orderDetailId = item.id;
          UpdateOrderProductData.value.orderDetailNumDtos.push(item);
        });
        visible7.value = true;
      })
      .finally(() => {
        loading.value = false;
      });
  }
};
//显示商品SKU
const examineSKU = (data) => {
  tableDataSku.value = data;
  visible5.value = true;
};
//展示商品的集合下标
const commodityIndex = ref(0);
//商品分页展示
const changePage = (page) => {
  modalloading.value = true;
  setTimeout(() => {
    modalloading.value = false;
  }, 500);
  commodityIndex.value = page - 1;
};
// 新的可用的支付方式
const payWayNew = ref<any>([]);
//新选择的支付方式
const payWayNewData = ref(null);
//提交
const submit = (type: number) => {
  if (type == 1) {
    //发货提交回调
    for (let index = 0; index < orderIDlist.value.length; index++) {
      for (let key in orderIDlist.value[index]) {
        if (!orderIDlist.value[index][key]) {
          return message.error("请补全发货信息!");
        }
      }
    }
    modalloading.value = true;
    orderBatchDelivery(orderIDlist.value)
      .then(() => {
        message.success("发货成功!");
        loadPagination();
        visible1.value = false;
      })
      .finally(() => {
        modalloading.value = false;
      });
  } else if (type == 2) {
    //开票提交回调
    invoiceRef.value.validate().then(() => {
      modalloading.value = true;
      orderUpdateOrderInvioce(invoiceForm.value)
        .then(() => {
          message.success("发票信息提交成功!");
          loadPagination();
          visible2.value = false;
        })
        .finally(() => {
          modalloading.value = false;
        });
    });
  } else if (type == 3) {
    //修改地址信息 clearValidate
    newAddressInformationRef.value.validate().then(() => {
      if (!newAddressInformation.value.consigneeProvinceId) {
        return message.error("请选择收货地址");
      }
      modalloading.value = true;
      orderCheckIsFreePostage(newAddressInformation.value)
        .then((res) => {
          let name = res.data.isFreePostage ? "包邮" : "不包邮";
          let name1 = res.data.oldIsFreePostage ? "包邮" : "不包邮";
          let name2 = name == name1 ? "也" : "";
          let name3 = res.data.freePostageFee
            ? `当前地址需要购买金额达到${
                res.data.freePostageFee || 0
              }元会包邮。`
            : "";
          Modal.confirm({
            title: "确定要修改收货地址吗?",
            icon: createVNode(ExclamationCircleOutlined),
            content: `当前地址是${name}的,历史的地址${name2}是${name}的。${name3}`,
            onOk() {
              modalloading.value = true;
              orderUpdateAddress(newAddressInformation.value)
                .then(() => {
                  visible6.value = false;
                  message.success("修改成功");
                  loadPagination();
                })
                .finally(() => {
                  modalloading.value = false;
                });
            },
            onCancel() {},
            class: "test"
          });
        })
        .finally(() => {
          modalloading.value = false;
        });
    });
  } else if (type == 4) {
    //校验支付方式
    modalloading.value = true;
    orderGetUpdateOrderProduct(UpdateOrderProductData.value)
      .then((res) => {
        if (res.data.status) {
          //支付方式可用进行预览
          form.value = res.data.data.orderDto;
          payWayNew.value = res.data.data.payWays;
          form.value.consigneeAddress =
            form.value.consigneeProvince +
            form.value.consigneeCity +
            form.value.consigneeCounty +
            form.value.consigneeAddress;
          form.value.payeeAddress =
            form.value.payeeProvince +
            form.value.payeeCity +
            form.value.payeeCounty +
            form.value.payeeAddress;
          form.value.consigneeAddress = form.value.consigneeAddress
            ? form.value.consigneeAddress
            : null;
          form.value.payeeAddress = form.value.payeeAddress
            ? form.value.payeeAddress
            : null;
          for (let k in form.value) {
            if (form.value[k] == "1900-01-01 00:00:00") {
              form.value[k] = null;
            }
          }
          //商品数据
          commodityIndex.value = 0;
          current.value = 1;
          commodityForm.value = form.value.orderDetails || [];
          commodityForm.value.forEach((item) => {
            item.productImg = JSON.parse(item.productImg);
            item.productSkuValues = JSON.parse(item.productSkuValues);
          });
          //发票数据
          invoiceDetailsForm.value = form.value.orderInvoiceDto;
          visibleTitle.value = "订单信息预览";
          isUpdata.value = true;
          visible.value = true;
        } else {
          //支付方式不可用重新选择支付方式
          message.error("请重新选择支付方式!");
          payWayNew.value = res.data.data;
          payWayNewData.value = null;
          visible8.value = true;
        }
      })
      .finally(() => {
        modalloading.value = false;
      });
  } else if (type == 5) {
    if (!payWayNewData.value || payWayNewData.value == 0) {
      UpdateOrderProductData.value.payWay = payWayNewData.value;
      visible8.value = false;
      submit(4);
    } else {
      message.error("请选择支付方式!");
    }
  } else if (type == 6) {
    //订单信息确认后提交回调
    modalloading.value = true;
    orderSubmitUpdateOrderInfo(UpdateOrderProductData.value)
      .then((res) => {
        message.success("修改成功");
        visible.value = false;
        visible7.value = false;
        loadPagination();
      })
      .finally(() => {
        modalloading.value = false;
      });
  }
};
//展示图片
const setVisible = (value: boolean): void => {
  visibleImg.value = value;
};
//切换Tab
const changeTab = (e) => {
  activeKey.value = e;
  pageSet.value.orderStatus = e;
  loadPagination(true);
};
//获取数据
const loadPagination = (flag: boolean = false): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableData.value = [];
  tableLoading.value = true;
  orderPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination(true);
//重置
const reset = (): void => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0,
    orderStatus: pageSet.value.orderStatus
  };
  loadPagination(true);
};
//导出
const exportDerive = (): void => {
  let tableExport = JSON.parse(JSON.stringify(tableData.value));
  tableExport.forEach((item) => {
    if (item.payWay == 1) {
      item.payWay = "支付宝";
    } else if (item.payWay == 2) {
      item.payWay = "线下汇款";
    } else if (item.payWay == 3) {
      item.payWay = "授信支付";
    }
    orderStatus.value.forEach((v) => {
      if (item.orderStatus == v.value) {
        item.orderStatus = v.label;
      }
    });
  });
  exportExcel(columns.value, tableExport, "订单信息");
};
const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "订单编号",
    dataIndex: "codeSN",
    align: "center",
    width: 200
  },
  {
    title: "用户名",
    dataIndex: "memberName",
    align: "center",
    width: 120
  },
  // {
  //   title: "商品信息",
  //   dataIndex: "orderDetails",
  //   align: "center",
  //   width: 100
  // },
  {
    title: "实际支付(元)",
    dataIndex: "payAmount",
    align: "center",
    width: 120
  },
  {
    title: "支付方式",
    dataIndex: "payWay",
    align: "center",
    width: 120,
    customRender: ({value}) => {
      if (value == 1) {
        return "支付宝";
      } else if (value == 2) {
        return "线下汇款";
      } else if (value == 3) {
        return "授信支付";
      }
    }
  },
  {
    title: "支付订单编号",
    dataIndex: "payCodeSN",
    align: "center",
    width: 240
  },
  {
    title: "订单状态",
    dataIndex: "orderStatus",
    align: "center",
    width: 180,
    customRender: ({value}) => {
      let name = "";
      orderStatus.value.forEach((item) => {
        if (value == item.value) {
          name = item.label;
        }
      });
      return name;
    }
  },
  {
    title: "下单时间",
    dataIndex: "addTime",
    align: "center",
    width: 180
  },
  {
    title: "操作",
    dataIndex: "l",
    align: "center",
    width: 230,
    fixed: "right"
  }
]);
//订单状态
const orderStatus = ref([
  {label: "已提交", value: 0},
  {label: "待支付订单", value: 1},
  {label: "待审核订单", value: 2},
  {label: "待发货订单", value: 3},
  {label: "待收货订单", value: 4},
  {label: "待评价订单", value: 5},
  {label: "交易成功", value: 6},
  {label: "售后中", value: 7},
  {label: "售后完成", value: 8},
  {label: "售后关闭", value: 9},
  {label: "交易关闭", value: 10}
]);
//支付方式
const payWay = ref([
  {label: "支付宝", value: 1},
  {label: "线下汇款", value: 2},
  {label: "授信支付", value: 3}
]);
//同步状态
const syncStatus = ref([
  {label: "未同步", value: 1},
  {label: "已同步", value: 2},
  {label: "同步失败", value: 3}
]);
//发票类型
const invoiceType = ref([
  {
    label: "增值税专用发票",
    value: "Z1"
  },
  {
    label: "增值税专用电子发票",
    value: "Z3"
  },
  {
    label: "数电增值税专票",
    value: "Z5"
  },
  {
    label: "数电增值税普票",
    value: "Z6"
  }
]);
//发票状态
const invoiceState = ref([
  {value: 1, label: "未开具"},
  {value: 2, label: "已开具"}
]);
const columnsSku = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "sort",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    }
  },
  {
    title: "属性名称",
    dataIndex: "ParamName",
    align: "center",
    width: 180
  },
  {
    title: "属性值",
    dataIndex: "ParamValue",
    align: "center",
    width: 180
  }
]);
//省市区三级联动
const provinceList: any = ref([]); //市
const cityList: any = ref([]); //区
const changeCity = (a, b) => {
  if (b == "province") {
    newAddressInformation.value.consigneeCityId = null;
    newAddressInformation.value.consigneeCity = null;
    newAddressInformation.value.consigneeCountyId = null;
    newAddressInformation.value.consigneeCounty = null;
    provinceList.value = [];
    cityList.value = [];
    if (a) {
      district.forEach((item) => {
        if (item.code == a) {
          provinceList.value = item.children;
          newAddressInformation.value.consigneeProvinceId = item.code;
          newAddressInformation.value.consigneeProvince = item.name;
        }
      });
    } else {
      newAddressInformation.value.consigneeProvinceId = null;
      newAddressInformation.value.consigneeProvince = null;
    }
  } else if (b == "city") {
    cityList.value = [];
    newAddressInformation.value.consigneeCountyId = null;
    newAddressInformation.value.consigneeCounty = null;
    if (a) {
      provinceList.value.forEach((item) => {
        if (item.code == a) {
          cityList.value = item.children;
          newAddressInformation.value.consigneeCityId = item.code;
          newAddressInformation.value.consigneeCity = item.name;
        }
      });
    } else {
      newAddressInformation.value.consigneeCityId = null;
      newAddressInformation.value.consigneeCity = null;
    }
  } else if (b == "district") {
    if (a) {
      cityList.value.forEach((item) => {
        if (item.code == a) {
          newAddressInformation.value.consigneeCountyId = item.code;
          newAddressInformation.value.consigneeCounty = item.name;
        }
      });
    } else {
      newAddressInformation.value.consigneeCountyId = null;
      newAddressInformation.value.consigneeCounty = null;
    }
  }
};
function changePicker(a, b) {
  if (a) {
    pageSet.value.beginTime = b[0];
    pageSet.value.endTime = b[1];
  } else {
    pageSet.value.beginTime = null;
    pageSet.value.endTime = null;
  }
}
</script>

<style lang="less" scoped></style>
